import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3



Page{
    id:root
    title: "Animation"

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"
        scale: 0.1
        opacity: 0.1
        radius: 50
        ParallelAnimation {
            id:display
            running: !hideDisplay.running
            PropertyAnimation { target: rect; property: "opacity"; to: 1; duration: 1000 }
            PropertyAnimation { target: rect; property: "scale"; to: 1; duration: 1000 }
            NumberAnimation { target: rect; property: "x"; to: 500; duration: 1000 }
            NumberAnimation { target: rect; property: "y"; to: 250; duration: 1000 }
            onStopped: {
                hideDisplay.start()
            }
        }
        ParallelAnimation {
            id:hideDisplay
            running: false
            PropertyAnimation { target: rect; property: "opacity"; to: 0; duration: 1000 }
            PropertyAnimation { target: rect; property: "scale"; to: 0; duration: 1000 }
            NumberAnimation { target: rect; property: "x"; to: 0; duration: 1000 }
            NumberAnimation { target: rect; property: "y"; to: 0; duration: 1000 }
            onStopped: {
                display.restart()
            }
        }
    }


    Rectangle{
        id:simple
        width: 100
        height: 100
        x:50
        y:50
        opacity: 0.5
        scale:0.5
        color: "yellow"

        SequentialAnimation{
            id:rorate
            running: true
            NumberAnimation{target: simple; property: "rotation"; to: 0; duration: 1000}
            NumberAnimation{target: simple; property: "rotation"; to: 90; duration: 1000}
            NumberAnimation{target: simple; property: "rotation"; to: 180; duration: 1000}
            NumberAnimation{target: simple; property: "rotation"; to: 270; duration: 1000}
            NumberAnimation{target: simple; property: "rotation"; to: 360; duration: 1000}
            PauseAnimation { duration: 1000 }
            onStopped: {
                rorate.restart()
            }
        }



        states: [

            State {
                name: "xmove"; PropertyChanges { target: simple; x: 600 }
            },


            State {
                 name: "ymove"; PropertyChanges { target: simple; y: 400 }
            },

            State {
                 name: "show"; PropertyChanges { target: simple; opacity: 1 }
            },

            State {
                 name: "in"; PropertyChanges { target: simple; scale: 1 }
            },

            State {
                 name: "out"; PropertyChanges { target: simple; scale: 0.1 }
            },

            State {
                 name: "hide"; PropertyChanges { target: simple; opacity: 0.1 }
            }
        ]

        state: "show"

//        transitions: Transition {
//               PropertyAnimation { properties: "x,y,opacity,scale"; duration: 1000; easing.type: Easing.InOutBack }
//        }


        Behavior on y {
            SmoothedAnimation { velocity: 200 }
        }

        Behavior on x {
            SpringAnimation{ velocity: 300 }
        }

        Behavior on opacity {
              PropertyAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
        }

        Behavior on scale {
              PropertyAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
        }

    }


    Rectangle {
      id: green
      width: 100; height: 100
      x:500
      y:250
      radius: 50
      color: "green"

      SequentialAnimation {
          id:serial
          running: true
          NumberAnimation { target: green; property: "x"; to: 0; duration: 1000 }
          NumberAnimation { target: green; property: "y"; to: 0; duration: 1000 }
          NumberAnimation { target: green; property: "x"; to: 500; duration: 1000 }
          NumberAnimation { target: green; property: "y"; to: 250; duration: 1000 }
          onStopped: {
            serial.restart()
          }
      }
    }

    Action {
        id: xmove
        text: qsTr("xmove")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "xmove"
    }

    Action {
        id: ymove
        text: qsTr("ymove")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "ymove"
    }

    Action {
        id: show
        text: qsTr("show")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "show"
    }

    Action {
        id: hide
        text: qsTr("hide")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "hide"
    }

    Action {
        id: _in
        text: qsTr("_in")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "in"
    }

    Action {
        id: _out
        text: qsTr("_out")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = "out"
    }
    Action {
        id: normal
        text: qsTr("normal")
        icon.source: "qrc:/image/icons/error.svg"
        onTriggered: simple.state = ""
    }

    footer:ToolBar {
        Row {
            anchors.fill: parent
            spacing: 10
            ToolButton { action: xmove }
            ToolButton { action: ymove }
            ToolButton { action: show }
            ToolButton { action: hide }
            ToolButton { action: _in }
            ToolButton { action: _out }
            ToolButton { action: normal }
        }
    }

}
